<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="600px" @confirm="handleSubmit" @close="handleClose">
		<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
			<el-form-item label="账号：" prop="account">
				<div class="w-80">
					<el-input v-model="formData.account" placeholder="请输入账号" clearable />
				</div>
			</el-form-item>
			<el-form-item label="姓名：" prop="name">
				<div class="w-80">
					<el-input v-model="formData.name" placeholder="请输入姓名" clearable />
				</div>
			</el-form-item>
			<el-form-item label="角色：" prop="role_id">
				<el-select class="w-80" :disabled="formData.root == 1" multiple placeholder="请选择角色" clearable v-model="formData.role_id">
					<el-option v-for="(item, index) in roleOptionsData" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="部门：" prop="dept_id">
				<el-cascader
					ref="cateTreeRef"
					:options="deptOptionsData"
					:props="{ multiple: false, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
					placeholder="请选择部门"
					clearable
					class="w-80"
					:disabled="formData.root == 1"
					v-model="formData.dept_id"
				>
					<template #default="{ data }">
						<span>{{ data.name }}</span>
					</template>
				</el-cascader>
			</el-form-item>
			<el-form-item label="岗位：" prop="jobs_id">
				<el-select class="w-80" :disabled="formData.root == 1" placeholder="请选择岗位" clearable v-model="formData.jobs_id">
					<el-option v-for="(item, index) in jobsOptionsData" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="密码：" prop="password">
				<div class="w-80">
					<el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="确认密码：" prop="password_confirm">
				<div class="w-80">
					<el-input v-model="formData.password_confirm" placeholder="请输入确认密码" show-password type="password" clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="手机号：" prop="mobile">
				<div class="w-80">
					<el-input v-model="formData.mobile" placeholder="请输入手机号" clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="邮箱：" prop="email">
				<div class="w-80">
					<el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="多端登录：">
				<div>
					<div>
						<el-radio-group v-model="formData.multipoint_login">
							<el-radio :label="1">支持</el-radio>
							<el-radio :label="0">禁止</el-radio>
						</el-radio-group>
					</div>
					<div class="el-form-tips">允许账号在多端同时登录</div>
				</div>
			</el-form-item>
			<el-form-item label="状态：">
				<el-radio-group v-model="formData.disable">
					<el-radio :label="0">正常</el-radio>
					<el-radio :label="1">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
	</baseDialog>
</template>

<script setup lang="ts" name="authUserEdit">
import { ref, shallowRef, reactive, computed, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';
import { adminDetail, adminAdd, adminEdit } from '/@/api/auth/admin';
import { roleAll } from '/@/api/auth/role';
import { deptAll } from '/@/api/auth/dept';
import { jobsAll } from '/@/api/auth/jobs';

const dialogRef = ref(null);

const dialogType = ref('add');

const dialogTitle = computed(() => {
	return dialogType.value == 'add' ? '添加管理员' : '编辑管理员';
});

const emit = defineEmits(['submit', 'close']);

const formRef = shallowRef<FormInstance>();

const formData = reactive({
	id: 0,
	root: 0,
	account: '',
	name: '',
	role_id: [],
	dept_id: '',
	jobs_id: '',
	password: '',
	password_confirm: '',
	mobile: '',
	email: '',
	multipoint_login: 1,
	disable: 0,
});

const equalToPassword = (rule, value, callback) => {
	if (formData.password !== value) {
		callback(new Error('两次的输入密码不一致'));
	} else {
		callback();
	}
};

const rules = reactive({
	account: [{ required: true, message: '请输入账号', trigger: ['blur'] }],
	name: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
	role_id: [{ required: true, message: '请选择角色', trigger: ['blur'] }],
	password: [{ required: true, message: '请输入密码', trigger: ['blur'] }],
	password_confirm: [
		{ required: true, message: '请输入确认密码', trigger: ['blur'] },
		{ required: true, validator: equalToPassword, trigger: ['blur'] },
	],
});

const roleOptionsData = ref([]);

const deptOptionsData = ref([]);

const jobsOptionsData = ref([]);

const setOptionsData = async () => {
	deptOptionsData.value = await deptAll();
	jobsOptionsData.value = await jobsAll();
	roleOptionsData.value = await roleAll();
};

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		dialogType.value == 'add' ? await adminAdd(formData) : await adminEdit(formData);
		dialogRef.value?.close();
		emit('submit');
	});
};

const setFormData = async (row: any, callback: any) => {
	const data = await adminDetail({
		id: row.id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined && data[key]) {
			formData[key] = data[key];
		}
	}
	callback();
};

const handleClose = () => {
	emit('close');
};

const open = (type = 'add') => {
	dialogType.value = type;
	dialogRef.value?.open();
};

onMounted(() => {
	setOptionsData();
});

defineExpose({
	open,
	setFormData,
});
</script>
